import React from 'react';
import { Upload, Modal, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { inject, observer } from 'mobx-react';
@inject('classMobx', 'addGoodsMobx')
@observer
class UploadImg extends React.Component {
  state = {
    goodsimg: '',
    previewVisible: false,
    previewImage: '',
    previewTitle: '',
    fileList: [],
  };
  componentDidMount = () => {
    if (!this.props.ok) {
      if (
        this.props.type === 'modify' ||
        this.props.type === 'specifyImg' ||
        this.props.type === 'goodsImg' ||
        this.props.type === 'spellGroupImg'
      ) {
        let file = {};
        file.thumbUrl = this.props.defaultValue;
        this.setState({
          fileList: [file],
        });
      }
    }
  };
  componentWillReceiveProps = props => {
    if (!this.props.ok) {
      while (props.type === 'goodsAlbum' && props.values.length > 0) {
        let file = [];
        props.values.some((item, i) => {
          file.push({
            uid: i,
            name: '',
            status: 'done',
            url: item.paIurl,
          });
        });
        this.setState({
          fileList: file,
        });
        return;
      }
    }
  };
  handleCancel = () => {
    this.setState({ previewVisible: false });
    if (!this.props.type) {
      this.props.classMobx.formChange('file', '');
    }
  };

  handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
      previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
    });
  };

  handleChange = ({ fileList }) => {
    if (fileList.length != 0) {
      fileList = fileList.map(item => {
        item.status = 'done';
        return item;
      });
    }
    /* specifyImg */
    this.setState({ fileList });
    if (fileList.length === 0) {
      if (this.props.type === 'modify') {
        this.props.formChange('file', '');
      } else if (this.props.type === 'goodsAlbum') {
        this.props.addGoodsMobx.formChange('file3', '');
      } else if (this.props.type === 'goodsImg') {
        this.props.addGoodsMobx.formChange('file1', '');
      } else if (this.props.type === 'spellGroupImg') {
        this.props.addGoodsMobx.formChange('file2', '');
      } else if (this.props.type === 'specifyImg') {
        this.props.addGoodsMobx.formChangePro(this.props.index, 0, 'pageUrl', '');
      } else {
        this.props.classMobx.formChange('file', '');
      }
    } else {
      if (this.props.type === 'modify') {
        this.props.formChange('file', fileList[0].originFileObj);
      } else if (this.props.type === 'goodsAlbum') {
        console.log(fileList);
        this.props.addGoodsMobx.formChange(
          'file3',
          fileList.map(item => item.originFileObj)
        );
      } else if (this.props.type === 'goodsImg') {
        this.props.addGoodsMobx.formChange('file1', fileList[0].originFileObj);
      } else if (this.props.type === 'spellGroupImg') {
        this.props.addGoodsMobx.formChange('file2', fileList[0].originFileObj);
      } else if (this.props.type === 'specifyImg') {
        this.props.addGoodsMobx.formChangePro(
          this.props.index,
          0,
          'file',
          fileList[0].originFileObj
        );
      } else {
        this.props.classMobx.formChange('file', fileList[0].originFileObj);
      }
    }
  };

  beforeUpload = file => {
    let { Size } = this.props;
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('仅支持上传 JPG/PNG 格式的图片!');
    }
    const isLt2M = file.size / 1024 / 1024 < Size;
    if (!isLt2M) {
      message.error(`图片大小超过 ${Size}MB!`);
    }
    return isJpgOrPng && isLt2M;
  };

  upload = file => {
    // console.log(file);
  };

  render() {
    const { previewVisible, previewImage, fileList, previewTitle } = this.state;
    const uploadButton = (
      <div>
        <PlusOutlined />
        <div style={{ marginTop: 8 }}>上传图片</div>
      </div>
    );
    const { maxNum } = this.props;
    return (
      <>
        <Upload
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
          customRequest={this.upload}
          beforeUpload={this.beforeUpload}
        >
          {fileList.length >= maxNum ? null : uploadButton}
        </Upload>
        <Modal
          visible={previewVisible}
          title={previewTitle}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </>
    );
  }
}
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default UploadImg;
